# Последние новости

### Реализация

#### В песочнице CodePen

Перед началом работы сделайте форк пена на [https://codepen.io/Netology/pen/eLqrKX](https://codepen.io/Netology/pen/eLqrKX?editors=1100). Вносите изменения только во вкладке CSS.

##### Внимание: Общую структуру документа создавать не надо, вкладка Codepen «HTML» работает, как тег `<body>`
см. [инструкцию по работе с Codepen](https://github.com/netology-code/guides/tree/master/codepen).

---

## Описание

Менеджеру блога «Нетологии» понравилась ваша предыдущая работа и он хочет продолжать с вами сотрудничать. Ваше новое задание &mdash; стилизовать блок новостей. Сейчас он выглядит так:

![](https://netology-code.github.io/html-2-homeworks/sources/2-1/latest-news-before.png)

А надо расположить новости в три колонки. Результат должен быть таким:

![](https://netology-code.github.io/html-2-homeworks/sources/2-1/latest-news-after.png)

## Процесс реализации

1. Установите ширину контентной области `960px` для элемента с классом `news`.
2. Расположите элемент с классом `news` по центру страницы по горизонтали.
3. Сделайте элемент с классом `card-date` блочным.
4. Установите внешний отступ снизу `20px` для элемента с классом `card-date`.
5. Установите внутренний отступ сверху и снизу размером `50px`, а слева и справа — размером `40px` для элементов с классом `card`.   
6. Установите ширину контентной области `320px` для элементов с классом `card`.
7. Сделайте так, чтобы блоки с услугами располагались в ряд, как показано на макете.
8. Убедитесь, что результат соответствует описанию. Для этого перейдите в режим FullPage ([скриншот](/sources/screen.md)). Если режим FullPage View выдал ошибку — вам нужно подтвердить свою учетную запись в codepen, пройдя по ссылке из письма, пришедшего от codepen, тогда все должно начать работать корректно.

